<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            margin: 0;
        }
        #app{
            height: 2000px;
        }
        .btn{
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-model.once="ipt" v-fbind="num">
        <h3 v-if="ipt||num>1">{{ipt}}{{nums}}</h3>
        <button @click="add">加加</button>
        <button @click.middle="clickEvent(1)"  @click.left="clickEvent(2)"  @click.right="clickEvent(3)">点我</button>
        <div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item <= 3" :key="item">
            {{item}}
        </div>
        <test @mounted="childMountedHandle" :datas="str" @change="goTop">
            <template #demo="{asg}">
                <p>这是插槽填写的内容{{asg}}</p>
            </template>
        </test>
        <div class="btn">grgergedgvdgvvf</div>
        <button @click="goTop">滚动到顶部</button>
    </div>
</body>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<script>
    const test = Vue.extend({
        template:`
        <div>
            <h1>{{msg}}</h1>
            <slot name="demo" :asg="asg">插槽的默认内容</slot>    
        </div>
        `,
        data() {
            return {
                msg: '你好呀',
                asg: '快使用双截棍'
            }
        },
        // props:{
        //     datas:{
        //         type: String,
        //         validator: s => ['small', 'middle'].includes(s)
        //     }
        // },
        mounted() {
            let arr = [1,2,3]
            this.$emit("mounted",arr);
            console.log(this.$listeners,this.$parent);//子组件需要调用父组件的方法解决父组件的方法可以通过listeners
            console.log(this.$attrs);//获取没有props配置项声明接收的数据
        },
    })
     new Vue({
        el:'#app',
        data(){
            return {
                ipt: '',
                num: 88,
                nums: 9,
                str: 'middle'
            }
        },
        mounted() {
            window.addEventListener('scroll', this.onScroll);
            // let timer = setInterval(()=>{
            //     //具体执行代码
            //     console.log('1');
            // },1000);
            // this.$once('hook:updated',()=>{
            //     clearInterval(timer);
            //     timer = null;
            // })
        },
        directives:{
            fbind:{
                bind(el,binding){
                   
                },
                inserted(el,binding){
                    el.focus();
                },
                update(el,binding){
                    el.value = 888;
                    console.log(el,binding);
                }
            }
        },
        components: {test},
        methods: {
            clickEvent(num) {
            console.log(num)
            },
            goTop(){
                window.scrollTo(0, 0)
            },
            add(){
                console.log(this.nums++);
                console.log(this.$options.data.call(this).nums,this.$options.data().nums);
            },
            onScroll(){
                console.log('滚动触发了');
            },
            childMountedHandle(data){
               if(data&&data.length){
                console.log('doing something');
               }else{
                console.log('没有收到数据');
               }
            }
        },
    })
</script>
</html>